<template>
	<view class="content">
		<rank-pop :is-show-rank="isShowRank"></rank-pop>
		<bottom-nav></bottom-nav>
		
		<image src="../../static/images/2.png" class="nav-bg"></image>
		
		<view class="slider-box">
			<swiper class="swiper" :autoplay="true" :interval="2000" @change="swiperChange">
				<swiper-item>
					<image src="../../static/images/slider1.jpg" class="swiper-item"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/slider2.jpg" class="swiper-item"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/images/slider3.jpg" class="swiper-item"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="indicator-box">
			<view class="indicator-item-box">
				<view class="indicator-item" :class="{'indicator-item-active': swiperIndex1}"></view>
			</view>
			<view class="indicator-item-box">
				<view class="indicator-item" :class="{'indicator-item-active': swiperIndex2}"></view>
			</view>
			<view class="indicator-item-box">
				<view class="indicator-item" :class="{'indicator-item-active': swiperIndex3}"></view>
			</view>
		</view>
		
		<view class="divider"></view>
		
		<view class="nav-box">
			<view class="nav-item">
				<view class="nav-icon" style="background-color: #ff5291;"></view>
				<view class="nav-label">模拟填报</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon" style="background-color: #17b4f7;"></view>
				<view class="nav-label">单招推荐</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon" style="background-color: #ff511c;"></view>
				<view class="nav-label">成绩类比</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon" style="background-color: #01caa1;"></view>
				<view class="nav-label">我的盲点</view>
			</view>
		</view>
		
		<view class="enroll-btn">优秀录取保障</view>
		
		<view class="volunteer">
			<view class="volunteer-left">第一志愿填报时间：</view>
			<view class="volunteer-right">7月25——8月5号</view>
		</view>
		
		<view class="divider"></view>
		
		<view class="school-list-box">
			
			<view class="list-title-box">
				<view class="list-title-item" @tap="changeSchoolType" data-index="0">
					<view class="list-title-label" :class="{'list-title-label-active': isShowList[0]}">省内优秀高校</view>
					<view class="list-title-line" :class="{'list-title-line-active': isShowList[0]}"></view>
				</view>
				<view class="list-title-item" @tap="changeSchoolType" data-index="1">
					<view class="list-title-label" :class="{'list-title-label-active': isShowList[1]}">省外优秀高校</view>
					<view class="list-title-line" :class="{'list-title-line-active': isShowList[1]}"></view>
				</view>
			</view>
			
			<view class="list-box" v-show="isShowList[0]">
				<view class="list-item" v-for="(item, i) in schoolList1" :key="item.id">
					<image class="school-img" :src="item.imgSrc"></image>
					<view class="op-bg"></view>
					<view class="school-name">{{item.name}}</view>
				</view>
			</view>
			<view class="list-box" v-show="isShowList[1]">
				<view class="list-item" v-for="(item, i) in schoolList2" :key="item.id">
					<image class="school-img" :src="item.imgSrc"></image>
					<view class="op-bg"></view>
					<view class="school-name">{{item.name}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import rankPop from '../../components/rank_pop.vue'
	import bottomNav from '../../components/bottom_nav.vue'
	
	export default {
		data() {
			return {
				animation: {},
				animationData: {},
				clientX: 0,
				curIndex: 0,
				isShowRank: false,
				swiperIndex1: true,
				swiperIndex2: false,
				swiperIndex3: false,
				schoolList1: [
					{id: 1, name: '河南工业大学', imgSrc: '../../static/images/slider1.jpg'},
					{id: 2, name: '郑州大学', imgSrc: '../../static/images/slider2.jpg'}
				],
				schoolList2: [
					{id: 1, name: '河南工程学院', imgSrc: '../../static/images/slider3.jpg'},
					{id: 2, name: '河南农业大学', imgSrc: '../../static/images/slider4.jpg'}
				],
				isShowList: [true, false]
			}
		},
		
		components: {
			bottomNav,
			rankPop
		},
		
		onLoad() {
			let animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease'
			})
			this.animation = animation
		},
		
		methods: {

			swiperChange(e) {
				let that = this
				switch (e.detail.current) {
					case 0:
						that.swiperIndex1 = true
						that.swiperIndex2 = false
						that.swiperIndex3 = false
						break
					case 1:
						that.swiperIndex2 = true
						that.swiperIndex1 = false
						that.swiperIndex3 = false
						break
					case 2:
						that.swiperIndex3 = true
						that.swiperIndex1 = false
						that.swiperIndex2 = false
						break
				}
			},
			
			showRank() {
				this.isShowRank = true
			},
			
			hideRank() {
				this.isShowRank = false
			},
			
			changeSchoolType(e) {
				this.isShowList[this.curIndex] = false
				this.curIndex = e.currentTarget.dataset.index
				this.isShowList[this.curIndex] = true
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
	}
	
	.nav-bg {
		position: absolute;
		width: 100%;
		height: 200rpx;
	}
	
	.slider-box {
		width: 680rpx;
		height: 250rpx;
		border-radius: 30rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}
	
	.swiper-item {
		width: 680rpx;
		height: 250rpx;
		border-radius: 30rpx;
	}
	
	.indicator-box {
		display: flex;
		margin-top: 20rpx;
	}
	
	.indicator-item-box {
		width: 30rpx;
		display: flex;
		justify-content: center;
	}
	
	.indicator-item {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #eeeeee;
	}
	
	.indicator-item-active {
		width: 30rpx;
		height: 12rpx;
		border-radius: 30rpx;
		background-color: #f29b76;
	}
	
	.divider {
		width: 100%;
		height: 18rpx;
		background-color: #eeeeee;
		margin-top: 20rpx;
	}
	
	.nav-box {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-top: 40rpx;
	}
	
	.nav-item {
		width: 122rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nav-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	
	.nav-label {
		font-size: 20rpx;
		margin-top: 10rpx;
	}
	
	.enroll-btn {
		width: 702rpx;
		height: 114rpx;
		background-color: #f40d29;
		border-radius: 57rpx;
		font-size: 44rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		font-weight: bold;
	}
	
	.volunteer {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		font-weight: bold;
	}
	
	.volunteer-left {
		color: #666666;
		font-size: 30rpx;
	}
	
	.volunteer-right {
		color: #5683ec;
		font-size: 36rpx;
	}
	
	.list-title-box {
		display: flex;
		margin-top: 30rpx;
		align-items: center;
	}
	
	.list-title-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.list-title-label {
		color: #999999;
		font-size: 24rpx;
	}
	
	.list-title-label-active {
		font-size: 30rpx;
		color: #333333;
	}
	
	.list-title-line {
		width: 140rpx;
		height: 4rpx;
		margin-top: 20rpx;
	}
	
	.list-title-line-active {
		background-color: #f40d29;
	}
	
	.list-box {
		width: 100%;
		margin-top: 30rpx;
	}
	
	.list-item {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.school-list-box {
		width: 702rpx;
		margin-bottom: 110rpx;
	}
	
	.school-img {
		width: 100%;
		height: 246rpx;
		border-radius: 30rpx;
	}
	
	.school-name {
		position: absolute;
		color: #ffffff;
		font-weight: bold;
		font-size: 60rpx;
	}
	
	.op-bg {
		width: 100%;
		height: 246rpx;
		position: absolute;
		background-color: #ffffff;
		opacity: 0.4;
	}
</style>
